<template>
	<view class="container">
		<image class="container-bg" :src="bg" @load="isLoading = false" mode=""></image>
		<view class="container-today">
			<view class="container-today__place">
				<view class="container-today__place-text">{{city}}</view>
				<view class="container-today__place-icon"><image src="@/static/theme/default/home/place.png" mode=""></image></view>
			</view>
			<view class="container-today__temp">
				<view class="container-today__temp-text">{{temperature}}</view>
				<view class="container-today__temp-unit">℃</view>
			</view>
			<view class="container-today__interval">
				<text class="">{{maxTemp}}℃</text>
				<text class="container-today__interval-icon">/</text>
				<text class="">{{minTemp}}℃</text>
			</view>
			<view class="container-today__des">
				<view class="container-today__des-left">{{weather}}</view>
				<view class="">风力{{power}}</view>
			</view>
		</view>
		<view class="container-future">
			<view class="container-future-icon">
				<view class="" v-for="item in futureIcons">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<Chart :option="option" :chartData="chartData" />
		</view>
		<view class="container-params">
			<view class="container-params-item" v-for="item in params">
				<view class="container-params-item-icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="container-params-text">{{item.text}}</view>
				<view class="container-params-value">{{item.value}}</view>
			</view>
		</view>
		<u-loading-page class="loading-page" bg-color="#fff" :loading="isLoading"></u-loading-page>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import weatherIcon from './weather.js'
	import Chart from '@/components/custom/chart/chart.vue'

	export default {
		components: {
			Chart,
		},
		data() {
			return {
				isLoading: true,
				date: moment().format('YYYY-MM-DD'),
				weatherIcon: weatherIcon,
				bg: "",
				city: '',
				power: '',
				minTemp: '',
				maxTemp: '',
				weather: '',
				temperature: _data.localData('temperature'),
				futureIcons: [],//天气图标
				params: [
					{
						icon: require('@/static/theme/default/weather/shidu.png'),
						text: '湿度',
						value: ''
					},
					{
						icon: require('@/static/theme/default/weather/fenli.png'),
						text: '风力',
						value: ''
					},
					{
						icon: require('@/static/theme/default/weather/fenxiang.png'),
						text: '风向',
						value: ''
					},
					{
						icon: require('@/static/theme/default/weather/kongqizhishu.png'),
						text: '空气指数',
						value: ''
					},
				],
				chartData: {
					series: [
						{
							name: '最高气温',
							type: 'line',
							data: [],
							symbol: 'emptyCircle',
							symbolSize: 10,
							showSymbol: true,
							smooth: true,
							itemStyle: {
								normal: {
									color: '#fff'
								}
							},
							label: {
								color: '#fff',
								show: true,
								position: 'top',
								// color: 'white',
								formatter: '{c} °C'
							},
							lineStyle: {
								width: 1,
								// color: 'white'
							},
							areaStyle: {
								opacity: 1,
								color: 'transparent'
							}
						},
						{
							name: '最低气温',
							type: 'line',
							data: [],
							symbol: 'emptyCircle',
							symbolSize: 10,
							showSymbol: true,
							smooth: true,
							itemStyle: {
								normal: {
									color: '#fff'
								}
							},
							label: {
								color: '#fff',
								show: true,
								position: 'bottom',
								// color: 'white',
								formatter: '{c} °C'
							},
							lineStyle: {
								width: 1,
								// color: 'white'
							},
							areaStyle: {
								opacity: 1,
								color: 'transparent'
							}
						},
						{
							name: '最高气温',
							type: 'line',
							data: [],
							symbol: 'emptyCircle',
							symbolSize: 10,
							showSymbol: true,
							smooth: false,
							itemStyle: {
								opacity: 0.5,
								color: '#fff',
							},
							label: {
								color: '#fff',
								show: true,
								position: 'top',
								// color: 'white',
								formatter: '{c} °C'
							},
							lineStyle: {
								width: 1,
								type:'dotted' 
								// color: 'white'
							},
							areaStyle: {
								opacity: 1,
								color: 'transparent'
							}
						},
						{
							name: '最低气温',
							type: 'line',
							data: [],
							symbol: 'emptyCircle',
							symbolSize: 10,
							showSymbol: true,
							smooth: false,
							itemStyle: {
								opacity: 0.5,
								color: '#fff',
							},
							label: {
								color: '#fff',
								show: true,
								position: 'bottom',
								// color: 'white',
								formatter: '{c} °C',
							},
							lineStyle: {
								width: 1,
								type:'dotted' 
								// color: 'white'
							},
							areaStyle: {
								opacity: 1,
								color: 'transparent'
							}
						},
					]
				},
				option: {
					grid: {
						show: true,
						backgroundColor: 'transparent',
						opacity: 0.3,
						borderWidth: '0',
						top: 180,
						bottom: 40,
						left: 40,
						right: 40
					},
					tooltip: {
						show: false,
						trigger: 'none'
					},
					legend: {
						show: false
					},
					xAxis: [
						// 日期
						{
							type: 'category',
							boundaryGap: false,
							position: 'top',
							offset: 130,
							zlevel: 100,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#fff',
								interval: 0,
								rich: {
									a: {
										color: '#DEE2E3'
									}
								},
								format: 'xAxisFormat'
							},
							data: []
						},
						// 星期
						{
							type: 'category',
							boundaryGap: false,
							position: 'top',
							offset: 110,
							zlevel: 100,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#fff',
								interval: 0,
								rich: {
									a: {
										color: '#DEE2E3'
									}
								},
								format: 'xAxisFormat'
							},
							nameTextStyle: {
								fontWeight: 'bold',
								fontSize: 19
							},
							data: []
						},
						// 天气图标
						{
							type: 'category',
							boundaryGap: false,
							position: 'top',
							offset: 30,
							zlevel: 100,
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#fff',
								interval: 0,
								rich: {
									a: {
										color: '#DEE2E3'
									}
								},
								format: 'xAxisIconFormat'
							},
							nameTextStyle: {
								fontWeight: 'bold',
								fontSize: 14
							},
							data: []
						}
					],
					yAxis: {
						type: 'value',
						show: false,
						axisLabel: {
							formatter: '{value} °C',
							color: 'white'
						}
					},
				}
			}
		},
		onLoad() {
			this.getWeather();
		},
		methods: {
			getWeather() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWeather',
					apiparam: {
						obsdate: this.date
					},
					success(res) {
						let today = res.length ? res[0] : {}
						_custom.getDataJava({
							apiname: 'getWeather',
							apiparam: {
								obsdate: moment(this.date).subtract(1, 'day').format('YYYY-MM-DD')
							},
							success(data) {
								let yesterday = data.length ? data[0] : {};
								that.params[0].value = today.Humidity;//湿度
								that.params[1].value = today.Power;//风力
								that.params[2].value = today.Direct;//风向
								that.params[3].value = today.Aqi;//空气指数
								that.city = today.City;
								that.power = today.Power;
								try {
									let list = [];
									if(!Object.keys(today).length || !Object.keys(yesterday).length) {
										uni.showToast({
											title: '无法获取天气数据！',
											icon: 'none'
										})
										return
									}
									for (let i = 0; i < 5; i++) {
										today['FutureInfo' + (i + 1)] = JSON.parse(unescape(today[
											'FutureInfo' + (i + 1)]))
										list.push(today['FutureInfo' + (i + 1)]);
									}
									let yesterdayInfo = JSON.parse(unescape(yesterday['FutureInfo1']))
									list.unshift(yesterdayInfo)
									let dateLabel = []
									let weekLabel = []
									let weather = []
									let richArray = []
									let rich = {}
									let maxTemperature = []
									let minTemperature = []
									let yesMaxTemp = [];
									let yesMinTemp = [];
									const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
									list.forEach((item,index) => {
										let i = item.date.lastIndexOf('-') + 1
										let day = item.date.substring(i) + '日';
										item.temperature = item.temperature.replace('℃','');
										let tIndex = item.temperature.indexOf('/');
										let minTemp = item.temperature.substring(0, tIndex);
										let maxTemp = item.temperature.substring(tIndex + 1);
										if(index == 0) {
											yesMaxTemp.push(maxTemp)
											yesMinTemp.push(minTemp)
											maxTemperature.unshift('-')
											minTemperature.unshift('-')
										} else if(index == 1) {//今天
											that.maxTemp = maxTemp;
											that.minTemp = minTemp;
											that.weather = item.weather;
											yesMaxTemp.push(maxTemp)
											yesMinTemp.push(minTemp)
											maxTemperature.push(maxTemp)
											minTemperature.push(minTemp)
										} else {
											maxTemperature.push(maxTemp)
											minTemperature.push(minTemp)
										}
										dateLabel.push(day)
										if(index == 0) {
											weekLabel.push('昨天')
										} else if(index == 1) {
											weekLabel.push('今天')
										} else if(index == 2) {
											weekLabel.push('明天')
										} else {
											weekLabel.push(weeks[moment(item.date).day()])
										}
										weather.push(item.weather)
										
										
										that.weatherIcon.forEach(v => {
											let wIndex = v.icon.indexOf('-')
											let icon = v.icon.substring(wIndex+1)
											if (item.wid.day == v.wid) {
												item.wid.dayIcon = icon
												if(index == 1) {
													that.bg = require('@/static/theme/default/weather/bg/' + v.bg + '.jpg')
												}
											}
											if (item.wid.night == v.wid) {
												item.wid.nightIcon = icon
											}
										})
										that.futureIcons.push(require('@/static/theme/default/weather/' + item.wid.dayIcon + '.png'));
									})
									that.chartData.series[0].data = maxTemperature;
									that.chartData.series[1].data = minTemperature;
									that.chartData.series[2].data = yesMaxTemp;
									that.chartData.series[3].data = yesMinTemp;
									that.option.xAxis[0].data = dateLabel;
									that.option.xAxis[1].data = weekLabel;
									that.option.xAxis[2].data = weather;
								} catch (e) {
									console.log(e)
								}
							}
						})
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		padding-top: 160rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		color: #fff;
		min-height: 100vh;
		// overflow-y: scroll;
		position: relative;
		color: #fff;
		
		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		
		&-today {
			width: 400rpx;
			margin: 40rpx auto;
			text-align: center;
			position: relative;
			z-index: 9;
			
			&__place {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				
				&-text {
					font-size: 35rpx;
					margin-right: 10rpx;
				}
				
				&-icon {
					margin-top: 18rpx;
					
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			&__temp {
				position: relative;
				
				&-text {
					font-size: 150rpx;
					transform: translateX(-20rpx);
				}
				
				&-unit {
					position: absolute;
					top: 0;
					right: 50%;
					transform: translateX(200%);
					font-size: 50rpx;
				}
			}
			
			&__interval {
				margin: 10rpx 0;
				
				&-icon {
					margin: 0 10rpx;
				}
			}
			
			&__des {
				display: flex;
				justify-content: center;
				
				&-left {
					margin-right: 30rpx;
				}
			}
		}
		
		&-future {
			height: 600rpx;
			position: relative;
			z-index: 9;
			
			&-icon {
				position: absolute;
				top: 140rpx;
				left: 50%;
				transform: translateX(-50%);
				height: 100rpx;
				width: 95%;
				display: flex;
				justify-content: space-between;
				
				view {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
		
		&-params {
			width: 90%;
			margin: 0 auto;
			// margin-bottom: 40rpx;
			background-color: rgba(255,255,255,.3);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-around;
			position: relative;
			z-index: 9;
			
			&-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10rpx 0;
				
				&-icon {
					width: 60rpx;
					height: 60rpx;
					
					image {
						width: 100%;
						height: 100%
					}
				}
			}
		}
	}
	
	.loading-page {
		z-index: 999;
	}
</style>
